<div class="wrapper">
  <div class="abs-center mt-lg width-lg">
    <nz-card [nzNoHovering]="true" [nzBordered]="false" class="ant-card__primary ant-card__title-img">
      <ng-template #title>
        <div class="text-center"><img src="./assets/img/logo.svg" style="height:20px;"></div>
      </ng-template>
      <ng-template #body>
        <form nz-form [formGroup]="valForm1" (ngSubmit)="submit()" role="form">
          <div nz-form-item>
            <div nz-form-control [nzValidateStatus]="valForm1.controls['email']">
              <nz-input formControlName="email" [nzPlaceHolder]="'邮箱'" [nzSize]="'large'">
                <ng-template #suffix>
                  <i class="anticon anticon-mail"></i>
                </ng-template>
              </nz-input>
              <div nz-form-explain *ngIf="valForm1.controls['email'].dirty&&valForm1.controls['email'].hasError('required')">邮箱必填</div>
              <div nz-form-explain *ngIf="valForm1.controls['email'].dirty&&valForm1.controls['email'].hasError('email')">邮箱格式不正确</div>
            </div>
          </div>
          <div nz-form-item>
            <div nz-form-control [nzValidateStatus]="valForm1.controls['password']">
              <nz-input formControlName="password" [nzPlaceHolder]="'密码'" [nzSize]="'large'">
                <ng-template #suffix>
                  <i class="anticon anticon-lock"></i>
                </ng-template>
              </nz-input>
              <div nz-form-explain *ngIf="valForm1.controls['password'].dirty&&valForm1.controls['password'].hasError('required')">密码必填</div>
            </div>
          </div>
          <div nz-form-item nz-row>
            <div nz-col [nzSpan]="12">
              <label nz-checkbox formControlName="remember_me">
                <span>记住密码</span>
              </label>
            </div>
            <div nz-col [nzSpan]="12" class="text-right">
              <a [routerLink]="['/forget']">忘记密码？</a>
            </div>
          </div>
          <div nz-form-item nz-row>
            <div nz-col [nzSpan]="24">
              <button nz-button [disabled]="!valForm1.valid" [nzType]="'primary'" [nzSize]="'large'" class="ant-btn__block">
                <span>登录</span>
              </button>
            </div>
          </div>
        </form>
      </ng-template>
    </nz-card>
  </div>
</div>
